﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>

	<style>
		.box, .box-1, .box-2, .box-3,
		.box2, .box2-1, .box2-2, .box2-3 {
			width: 200px;
			height: 200px;
		}

		.box, .box2 {
			overflow: hidden;
		}

		.box2 .in {
			width: 600px;
		}

		.box2 .in div {
			float: left;
		}

		.box-1, .box2-1 {
			background: #9f8;
		}

		.box-2, .box2-2 {
			background: #89f;
		}

		.box-3, .box2-3, .boxn {
			background: #f98;
		}

		.boxa {
			width: 300px;
			height: 300px;
			background: #9f8;
			position: relative;
		}

		.boxb {
			width: 200px;
			height: 200px;
			background: #89f;
			position: absolute;
			top: 0;
			left: 0;
		}

		.boxc {
			width: 20px;
			height: 20px;
			background: #f98;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.boxn {
			width: 300px;
			height: 80px;
			font-size: 30px;
			line-height: 40px;
			text-align: center;
			color: #fff;
		}
	</style>
</head>
<body>
	<h3>触点事件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>通过设置 setSwipeTop、setSwipeBottom，在盒子上上下拖拽会触发不同效果</h5>
			<div class="box">
				<div class="box-1">1</div>
				<div class="box-2">2</div>
				<div class="box-3">3</div>
			</div>

			<hr class="hr" />

			<h5>通过设置 setSwipeLeft、setSwipeRight，在盒子上左右拖拽会触发不同效果</h5>
			<div class="box2">
				<div class="in">
					<div class="box2-1">1</div>
					<div class="box2-2">2</div>
					<div class="box2-3">3</div>
				</div>
			</div>

			<hr class="hr" />

			<h5>通过设置 setPan、setUp 让小球与盒子运动</h5>
			<div class="boxa">
				<div class="boxb">
					<div class="boxc"></div>
				</div>
			</div>

			<hr class="hr" />

			<h5>通过设置 setTap、setPress 计数</h5>
			<div class="boxn">
				短按了0下<br />
				长按了0下
			</div>

		</div>
	</fieldset>

	<script>
		var box = ud2.event('.box');
		box.i = 0;
		box.lock = false;
		function boxMove(move) {
			if (!box.lock) {
				box.lock = true;
				var first = this.children().first();
				if (move) {
					box.i++;
				} else {
					box.i--;
				}
				box.i = box.i > 2 ? 2 : box.i;
				box.i = box.i < 0 ? 0 : box.i;
				first.animate({
					'margin-top': box.i * -200
				}, 500, function () {
					box.lock = false;
				});
			}
		}
		box.setSwipeTop(function () {
			boxMove.call(this, 1);
		}).setSwipeBottom(function () {
			boxMove.call(this, 0);
		});
		// ----------------------------------------
		var box2 = ud2.event('.box2');
		box2.i = 0;
		box2.lock = false;
		function box2Move(move) {
			if (!box2.lock) {
				box2.lock = true;
				var first = this.children();
				if (move) {
					box2.i++;
				} else {
					box2.i--;
				}
				box2.i = box2.i > 2 ? 2 : box2.i;
				box2.i = box2.i < 0 ? 0 : box2.i;
				first.animate({
					'margin-left': box2.i * -200
				}, 500, function () {
					box2.lock = false;
				});
			}
		}
		box2.setSwipeLeft(function () {
			box2Move.call(this, 1);
		}).setSwipeRight(function () {
			box2Move.call(this, 0);
		});
		// ----------------------------------------
		var boxb = ud2.event('.boxb', {
			stopPropagation: true
		});
		boxb.point = { x: 0, y: 0 };
		boxb.last = null;
		boxb.setPan(function (move) {
			var x = boxb.point.x + move.x;
			var y = boxb.point.y + move.y;
			x = x > 100 ? 100 : x;
			x = x < 0 ? 0 : x;
			y = y > 100 ? 100 : y;
			y = y < 0 ? 0 : y;
			boxb.last = { x: x, y: y };
			$('.boxb').css({
				top: y,
				left: x
			});
		}).setUp(function () {
			boxb.point = {
				x: boxb.last.x,
				y: boxb.last.y
			};
		});
		var boxc = ud2.event('.boxc', {
			stopPropagation: true
		});
		boxc.point = { x: 0, y: 0 };
		boxc.last = null;
		boxc.setPan(function (move) {
			var x = boxc.point.x + move.x;
			var y = boxc.point.y + move.y;
			x = x > 180 ? 180 : x;
			x = x < 0 ? 0 : x;
			y = y > 180 ? 180 : y;
			y = y < 0 ? 0 : y;
			boxc.last = { x: x, y: y };
			$('.boxc').css({
				top: y,
				left: x
			});
		}).setUp(function () {
			boxc.point = {
				x: boxc.last.x,
				y: boxc.last.y
			};
		});
		// ----------------------------------------
		var boxn = ud2.event('.boxn');
		boxn.a = 0;
		boxn.b = 0;
		boxn.setTap(function () {
			boxn.a++;
			this.html('短按了' + boxn.a + '下<br />长按了' + boxn.b + '下');
		}).setPress(function () {
			boxn.b++;
			this.html('短按了' + boxn.a + '下<br />长按了' + boxn.b + '下');
		});
	</script>
</body>
</html>
